<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <script type="text/javascript" src = "{{ asset('home\kaidian\businessinfo\js\jquery-1.8.3.min.js') }}"></script>
  <title>开店申请</title> 
  <meta name="description" content="开店申请" /> 
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
  <link rel="icon" href="{{ url('home\kaidian\businessinfo\images\favicon-32x32.png')}}" type="image/x-icon" /> 
  <base href="" /> 
  <link media="all" href="{{ url('home\kaidian\businessinfo\css\index.css')}}" type="text/css" rel="stylesheet" /> 
 </head> 
 <body ng-app="nevermore" class="ng-scope"> 
  <!-- uiView: -->
  <ui-view class="ng-scope">
   <!-- ngInclude: 'modules/records/header.html' -->
   <div ng-include="'modules/records/header.html'" class="ng-scope">
    <header class="row ng-scope"> 
     <div> 
      <a ui-sref="home" style="text-decoration: none;" href="https://kaidian.ele.me/"> <img src="{{ url('home\kaidian\businessinfo\css\73caa017b45adf0004bcb332f168d264.svg')}}" alt="LOGO" /> <span class="ml-10">商户中心</span> </a> 
      <div class="pull-right ng-binding"> 
       <img src="{{ url('home\kaidian\businessinfo\css\25bf9c3b73ffd2e9c3b986898f026fa9.svg')}}" />
       <img class="arrow" src="{{ url('home\kaidian\businessinfo\css\020803b31ca45a097708c0cebcf12571.svg')}}" /> 
       <div class="quit-account"> 
        <a ui-sref="home" href="https://kaidian.ele.me/"> 退出账号 </a> 
       </div> 
      </div> 
     </div> 
    </header>
   </div> 
   <div id="store" ng-click="closeDialog()" class="ng-scope"> 
    <section class="row"> 
     <div class="tabs"> 
      <div class="title">  
      </div>
      <!-- ngInclude: 'modules/store/basicInfo.html' -->
      <div class="tab ng-scope" ng-include="'modules/store/basicInfo.html'" ng-controller="BasicInfoCtrl" ng-show="ui.activeTab === 1">
      
       <form name="formBase" class="form ng-pristine ng-scope ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength ng-valid-minlength" autocomplete="off" novalidate="" method = "post" action = "{{url('/home/kaidian/update')}}" enctype = "multipart/form-data">
       {{ csrf_field() }}
        @if(session('info'))
          {{ session('info') }}
        @endif
        @if(session('info'))
            <div  id = 'showhidden' class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4>    <i class="icon fa fa-check"></i>提示!</h4>
                    {{ session('info') }}
             </div>
        @endif
        @if(count($errors)>0)
          <div style = "border:1px solid green;color:red;background:green;">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4><i class="icon fa fa-ban"></i> 警告!</h4>
                <ul>
                  @foreach($errors->all() as $error)
                  <li>
                    {{$error}}
                  </li>
                  @endforeach
                </ul>
          </div>
        @endif
       <input type="hidden" name = 'email' value = "{{ $email }}"> 
        <div class="form-group margin-bottom-5"> 
         <label>带 <span class="red vertical-align">*</span> 号的表格为必填项</label> 
        </div> 
        <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 门店名称 </label> 
         <div class="row"> 
          <input name="username" class="form-control input1 ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength" ng-model="store.store_name" maxlength="32" placeholder="例如：九谷小食（近铁店）" ng-model-options="{ updateOn: 'blur' }" ng-pattern="/^((?!test|测试).)*$/" required="" type="text" /> 
          <small class="red ng-hide" ng-show="formBase.storeName.$error.required &amp;&amp; formBase.storeName.$dirty">不可为空</small> 
          <small class="red ng-hide" ng-show="formBase.storeName.$error.pattern &amp;&amp; formBase.storeName.$dirty">门店名称包含非法字符(测试、test)，请重新输入</small> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 手机号 </label> 
         <div class="row"> 
          <input name="phone" class="form-control input1 ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-minlength ng-valid-maxlength" ng-model="store.mobile" maxlength="11" minlength="11"  required="" type="text" /> 
         </div> 
        </div>

        <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 密码 </label> 
         <div class="row"> 
          <input name="password" class="form-control input1 ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-minlength ng-valid-maxlength" ng-model="store.mobile" maxlength="11" minlength="11"  required="" type="password" /> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 重复密码 </label> 
         <div class="row"> 
          <input name="repassword" class="form-control input1 ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-minlength ng-valid-maxlength" ng-model="store.mobile" maxlength="11" minlength="11"  required="" type="password" /> 
         </div> 
        </div> 

        <div class="form-group" style="width: 600px;"> 
         <label> <span class="red vertical-align">*</span> 门店分类 </label> 
         <div id="nevSelect" ng-click="toggleContent()" items="flavor" selected-items="selectedFlavors" init-items="initFlavors" class="ng-isolate-scope">
          <!-- 门店分类选择 -->
          <ul class="select-choices"> 
            
           <!-- ngRepeat: item in selectedItems track by $index --> 
              <div style = "float:left;">
                <select style = "width:296px;border:0px;height:29px;" name = 'id' class = "cate1">
                    <option>主分类</option>
                </select >
              </div>
              <div style = "float:left;">
                <select style = "width:296px;border:0px;height:29px;" name = 'cateid' class = "cate2">
                    <option>副分类</option>
                </select>
            </div>
          </ul> 
          <div class="select-content ng-hide" ng-show="showContent"> 
          </div> 
          <small class="red errorInfo ng-binding"></small> 
         </div> 
        </div>  
        <div class="form-group">

        <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 店铺描述 </label> 
         <div class="row"> 
          <input name="des" class="form-control input1 ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-minlength ng-valid-maxlength" ng-model="store.mobile" maxlength="11" minlength="11"  required="" type="text" /> 
         </div> 
        </div>

        <div class="form-group">
            <label for="exampleInputFile">上传图片</label>
            <input type="file" id="exampleInputFile" name = 'image'>
            <p class="help-block">请上传一张图片</p>
        </div>

        <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 营业时间 </label> 
         <div class="row"> 
          <input name="worktime" class="form-control input1 ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-minlength ng-valid-maxlength" ng-model="store.mobile" maxlength="11" minlength="11"  required="" type="text" /> 
         </div> 
        </div>  

         <label> <span class="red vertical-align">*</span> 门店地址 </label> 
         <!-- 三级城市联动 -->
         <div class="row"> 
            <select name="provice" id="province" style = "width:200px;height:30px;">
              <option>--请选择省--</option>
              <option value="0">北京市</option>
              <option value="1">天津市</option>
              <option value="2">重庆市</option>
              <option value="3">河北省</option>
              <option value="4">广东省</option>
              <option value="5">上海市</option>
            </select>
            <select name="city" id="city" style = "width:200px;height:30px;">
              <option value="">--请选择市--</option>
            </select>
            <select name="county" id="county" style = "width:200px;height:30px;">
              <option value="">--请选择--</option>
            </select>
         </div>

          
        </div> 

         <p class="margin-top-10 grey"> 如果所选城市无区/县，可不选择区/县 </p>
         <div class="form-group"> 
         <label> <span class="red vertical-align">*</span> 地址 </label> 
         <div class="row"> 
          <input name="address" class="form-control input1 ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-minlength ng-valid-maxlength" ng-model="store.mobile" maxlength="11" minlength="40"  required="" type="text" /> 
         </div> 
        </div> 
        <hr /> 
        <div class="form-group"> 
         <button class="btn btn-primary btn-lg ng-isolate-scope" ga-point="{eventLabel:'基本信息—下一步'}" type="submit" ng-disabled="formBase.$invalid || !selectedFlavors.length || !store.longitude" ng-click="changeTabs(2)" >提交信息</button> 
        </div> 
       </form>
      </div> 
 </body>
</html>
<script>
  // onchange:发生改变的时候触发事件
  // 1.获取对象
  var province = document.getElementById('province');
  var city = document.getElementById('city');
  var county = document.getElementById('county');

  // 2.省份的改变事件
  var val = 0;
  province.onchange = function(){
    // 2.1 获取省份的值
    val = this.value;

    // 2.2 手动列出省份对应的区市，使用数组的形式
    var arr = [
        ['昌平区','海淀区','朝阳区'],
        ['滨海区','武清县','南开区'],
        ['重庆1','重庆2','重庆3'],
        ['廊坊','石家庄','保定'],
        ['佛山','东莞','广州'],
        ['浦东','普陀区','虹桥']
      ];

    // 2.3 获取省对应的市
    var c = arr[val];
    console.log(c);

    // 2.4 遍历拼装
    var str = '<option value="">--请选择市--</option>';
    for (var n in c) {
      str += '<option value="'+n+'">'+c[n]+'</option>';
    }
    console.log(str);

    // 2.5 将拼装好的str写入city内
    city.innerHTML = str;

    // 2.6 初始化县城的默认值
    county.innerHTML = '<option value="">--请选择--</option>';
  }

  // 3. 市下拉框的改变事件
  city.onchange = function(){
    // 3.1 获取市的值
    var value = this.value;

    // 3.2 列举市对应的县城
    // 必须有省和市的value值确定对应的县城
    var arr = [
        [['北七家','回龙观','七里渠'],['海淀区1','海淀区2','西二旗'],['上地','四惠','朝阳1']],
        [['滨海1','滨海2','滨海3'],['武清1','武清2']],
        [],
        [['霸州','永清'],['桥东','桥西'],['安国','定州']]
      ];

    // 3.3 获取省市对应的县城
    var c = arr[val][value];
    // console.log(c);

    // 3.4 遍历拼接
    var str = '<option value="">--请选择--</option>';
    for (var i in c) {
      str += '<option value="'+i+'">'+c[i]+'</option>';
    }
    console.log(str);

    // 3.5 写入select#county下拉框内
    county.innerHTML = str;
  }


  //书写商品分类的ajax
  //页面嘉爱开始发送一个ajax请求，将主分类加载过来
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax ({
      url:'/home/kaidian/ajaxload',
      type:'post',
      dataType:'json',
      success:function(data)
      {
        // console.log(data);
        // 遍历结果
        $.each(data,function(i){
            var name = "<option value ='"+ data[i]['id']+"'>"+ data[i]['name'] + "</option>";
            $(name).appendTo($('.cate1'));
        });
      }
    });

    // 选择之分类后，根据主分类发送ajax请求，拿到副分类
    $('.cate1').live('change',function()
    {
        var id = $(this).val();
        $.post('/home/kaidian/second',{id:id},function(data){
          // console.log(data);
            $.each(data,function(i){
              var name = "<option value ='"+ data[i]['id']+"'>"+ data[i]['name'] + "</option>";
              // console.log()
              $(name).appendTo($('.cate2'));
            });

        },'json');
    });
  </script>